<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
		img{
			/*图片脱离文档流--文字包含在图片周边*/
			float: left;
			margin-right: 50px;/*图片与文字链接处间隙*/
			margin-bottom: 50px;/*图片与文字链接处间隙*/
		}
		p{
			font-size: 16px;/*页面默认字体尺寸*/
			line-height: 20px;/*浮动文字，行高无法设定*/
			word-spacing: 20px;
		}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/美乐蒂.png" alt="美乐蒂" width="250px" height="250px"/>
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, nam laborum doloribus, animi repellendus reiciendis exercitationem ipsam voluptate adipisci, corrupti ipsum atque nisi error recusandae. Vel minus eos officia minima?  Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quidem explicabo in corporis? Commodi inventore explicabo nihil ea. Natus minus nobis dolore illum veniam qui ipsa incidunt sunt recusandae repudiandae?  Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda corrupti veniam consectetur cupiditate voluptatem iste repellendus unde commodi maxime, ipsa, at tempora ab! Explicabo expedita consequatur enim iure, accusamus natus.   Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis minima velit quis sed aperiam quam, qui eveniet odio esse nihil hic non deleniti molestiae dolorem voluptatem earum veniam, error assumenda?</p>
	</body>
</html>